<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta charset="UTF-8">
    <script src="js/touchDrag.js"></script>
    <title>scrolldrag</title>
    <style>
        html,body{margin: 0;padding: 0;width: 100%;height: 100%;}

        .scrollease{transition: all 0.3s cubic-bezier(0,1,1,1);}
        .main{
            width: 100%;
            height: 100%;
            /* 禁止用户自己滚动 */
            overflow: hidden;
        }
        .wrap {
            width: 100%; height: 100%;
            /*弹性盒子*/
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            /*从上向下垂直排列子元素。*/
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
            flex-flow: column;
        }

        .wrap >dl {
            flex:0 0 100%;
            position: relative;
            width: 100%;
            margin: 0;
            overflow: hidden;
            background-color: antiquewhite;
        }

        .text {
            position: absolute;left: 5%;top: 50%;
            font-size: 50px;color: white;line-height: 1.5;
            text-shadow:0 10px 20px rgba(0, 0, 0, 0.4);
        }
        .objcover{width: 100%;height: 100%;object-fit: cover;}
        .objcontain{width: 100%;height: 100%;object-fit: contain;}

        div img{display: block;-webkit-user-drag: none;}
    </style>
</head>

<body>

    <div class="main">
        <div class="wrap">
            <dl>
                <img src="images/tu1.jpg" class="objcover scrollpos" sc="-0.8">
                <div class="text scrollpos" sc="0.7">图片1<br><span style="font-size: 22px">PC端浏览器请模拟触摸屏浏览<br><a href="http://www.flashme.cn" target="_blank">my web</a></span></div>
                <div class="text scrollpos" sc="-0.5" style="left: 30%">跟着走</div>
            </dl>
            <dl>
                <img src="images/tu2.jpg" class="objcontain">
                <div class="text scrollpos" sc="0.7">图片2</div>
                <div class="text scrollpos" sc="-0.5" style="left: 30%">跟着走啊</div>
            </dl>
            <dl>
                <img src="images/tu1.jpg" class="objcover scrollscale" sc="-0.8">
                <div class="text scrollpos" sc="0.5">图片3</div>
            </dl>
            <dl>
                <img src="images/tu2.jpg" class="objcontain">
                <div class="text scrollpos" sc="-0.9">图片4</div>
            </dl>
            <!-- 补充整体高度，向上拖拽会导致滚动区域缩短而无法定位上面的最后一页 -->
            <div style="flex:0 0 100%;backdrop-filter: blur(2rem)"></div>
        </div>
    </div>

    <script>
        //滑滚位置
        var scrollSmoothTo = function (dom, position, fun) {
            if (dom.scrollHeight <= dom.clientHeight) {
                return;
            }
            window.scrollStop=false;
            var timeIndex;
            if (!window.requestAnimationFrame) {
                window.requestAnimationFrame = function (callback, element) {
                    return setTimeout(callback, 17);
                };
            }
            // 当前滚动高度
            var scrollTop = dom.scrollTop;
            // 滚动step方法
            var step = function () {
                // 距离目标滚动距离
                var distance = position - scrollTop;
                // 目标滚动位置
                scrollTop = scrollTop + distance / 6;
                fun && fun.moveback && fun.moveback(scrollTop);
                if (Math.abs(distance) < 1) {
                    dom.scrollTo(0, position);
                    fun && fun.endback && fun.endback(scrollTop);
                } else if(!window.scrollStop) {
                    dom.scrollTo(0, scrollTop);
                    requestAnimationFrame(step);
                }
            };
            step();
        };
    </script>

    <script>
        
        const main = document.querySelector('.main');
        const wrap = document.querySelector('.wrap');
        const dl = document.querySelectorAll('.wrap >dl');
        const conLength = dl.length;
        const winH = main.clientHeight;
        var scrollH = main.scrollHeight;

        dl.forEach((ev, index)=>{
            ev.querySelectorAll('.scrollpos, .scrollscale').forEach((ele, key)=>{
                ele.dataset.index = index;
                ele.dataset.top = ev.offsetTop;
                ele.dataset.offtop = ele.offsetTop;
            })
        })



        var scrollTop=0;
		var nowDl,area=winH*.9,scrollIndex=0;
		const drag = new touchDrag({
			target:wrap,
			range:{x:0,y:-area,height:0,width:0},
			touchstart:function(ev){
				// wrap.classList.remove('scrollease');
				scrollOld=ev.changedTouches[0].clientY;
                scrollH = main.scrollHeight;
			},
			touchmove:function(ev){
				scrollPosition(scrollTop-drag.newY)
			},
			touchend:function(ev){
				var endY=ev.changedTouches[0].clientY;

                // wrap.classList.add('scrollease');//末端缓动画
                main.scrollTo(0, scrollTop-drag.newY);//滚动初始位补移动的差额
				wrap.style.transform = 'translate3D(0px, 0px, 0px)';//恢复拖拽的位置
				drag.nowY=0;

				if (scrollOld > endY && scrollIndex < conLength - 1) {
					scrollIndex += 1;
				} else if (scrollOld < endY && scrollIndex > 0) {
					scrollIndex -= 1;
				}
				if(scrollIndex==0){
					drag.setRange({y:-area,height:0});
				}else if(scrollIndex==conLength - 1){
					drag.setRange({y:0,height:area});
					// return;
				}else{
					drag.setRange({y:-area,height:area})
				}


				
				nowDl = dl[scrollIndex];

				const _top = nowDl.offsetTop;
				scrollSmoothTo(main, _top, {
                    moveback:(_top)=>{
                        scrollTop=_top;
                        scrollPosition(scrollTop);
                    },
                    endback:(_top)=>{
                        scrollTop=_top;
                        scrollPosition(scrollTop);
                    }
                });

				
			}
		});

		// main.onscroll = function () {
        //     scrollTop = this.scrollTop;
		// 	scrollPosition(scrollTop);
		// }

        function scrollPosition(_y) {
            //滚动缩放
            document.querySelectorAll('.scrollscale').forEach(function (ele) {
                var rect = ele.getBoundingClientRect();
                var scale = Math.abs(ele.dataset.top-_y)*0.001 + 1;
                ele.style.transform='scale('+scale+','+scale+')';

            })
            //滚动位移
            document.querySelectorAll('.scrollpos').forEach(function (ele) {
                var sc=Number(ele.getAttribute('sc'));
                ele.style.transform = "translateY(" + ((ele.dataset.top-_y)*sc) + "px)";

            })
        }
    </script>
    
</body>

</html>